<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div class="container">
        <print-modal ref="printModal" :show-img-list="imgList"></print-modal>
        <viewer-show-img :view-show="viewShow" :show-img-list="showImgList" ref="viewerShowImg" @close="showImgList=[]"></viewer-show-img>
        <div class="opt-area-02">
            <span class="left-con">
                材料总数: <span> {{bar.materialTotalNum}}</span> 条 |
                图片总数: <span> {{bar.imgTotalNum}}</span> 条
            </span>
        </div>
        <vxe-toolbar>
            <template v-slot:buttons>
                <template>
                    <Input type="text" @on-enter="searchAction" @on-click="searchAction" placeholder="请输入身份证号" v-model="params.idcard"
                           icon="ios-search" class="input-class"/>
                </template>
            </template>
        </vxe-toolbar>
        <vxe-table
                border
                resizable
                show-overflow
                ref="xTable"
                size="medium"
                max-height="500"
                class="my_table_insert"
                :loading='tableLoading'
                :data="tableData"
                align="center"
                header-align="center"
                :tooltip-config="{theme:'light',enterable:true}">
            <vxe-table-column type="seq" width="60"></vxe-table-column>
            <vxe-table-column
                    field="title"
                    title="材料名称"
                    min-width="180"
                    :filters="[{ data: '' }]"
                    :filter-method="filterTitleMethod">
                <template v-slot:filter="{ $panel, column }">
                    <input type="type" v-for="(option, index) in column.filters" :key="index" v-model="option.data"
                           @input="$panel.changeOption($event, !!option.data, option)">
                </template>
            </vxe-table-column>
            <vxe-table-column field="dir" title="文件夹名(序号)" min-width="150"></vxe-table-column>
            <vxe-table-column field="num" title="页数" min-width="100"></vxe-table-column>
            <vxe-table-column field="record_number" title="全宗号" width="100"></vxe-table-column>
            <vxe-table-column field="serial_number" title="流水号" width="100"></vxe-table-column>
            <vxe-table-column field="name" title="姓名" width="100"></vxe-table-column>
            <vxe-table-column field="idcard" title="身份证号" width="200"></vxe-table-column>
            <vxe-table-column field="create_time" title="创建时间" width="150"></vxe-table-column>
            <vxe-table-column field="remark" title="备注" min-width="150"></vxe-table-column>
            <vxe-table-column field="formate_time" title="形成时间" min-width="150"></vxe-table-column>
            <vxe-table-column
                    field="imgList"
                    title="图片内容"
                    fixed="right"
                    min-width="270">
                <template v-slot="{ row, rowIndex }">
                    <Button v-has="'CL_view'" class="btn-action" type="primary" size="small" @click="showImgListAction(row)">查看[{{
                        row.imgListCount }}]
                    </Button>
                    <Button v-has="'CL_viewAll'" class="btn-action" type="primary" size="small" @click="showImgAllAction(row, rowIndex)">
                        查看所有
                    </Button>
                    <Button v-has="'CL_print'" class="btn-action" type="primary" size="small" @click="printAction(row, rowIndex)">
                        打印
                    </Button>
                </template>
            </vxe-table-column>
        </vxe-table>
    </div>
</template>
<script>
import {
  getMaterialByIDCardList
} from '@/api/record'
import ViewerShowImg from './components/viewer-show-img'
import PrintModal from '@/views/pages/record/printing/components/print-modal'
export default {
  components: { PrintModal, ViewerShowImg },
  data () {
    return {
      tableLoading: false,
      tableData: [],
      params: {},
      viewShow: true,
      showImgList: [],
      cloneTableData: [],
      bar: {
        materialTotalNum: 0,
        imgTotalNum: 0
      },
      imgALlList: [],
      imgList: []
    }
  },
  methods: {
    filterTitleMethod ({ option, row }) {
      return row.title && row.title.indexOf(option.data) !== -1
    },
    init () {
      this.tableLoading = true
      const param = {
        idcard: this.$common.xeUtils.trim(this.params.idcard)
        // idcard: '210104195602054126'
      }
      getMaterialByIDCardList(param).then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.tableData = data.data
          this.bar.materialTotalNum = this.tableData.length
          this.bar.imgTotalNum = 0
          this.showImgList = []
          data.data.forEach(item => {
            if (item.num) this.bar.imgTotalNum += parseInt(item.num)
            if (item.img_path) {
              item.img_path = (item.img_path.substring(item.img_path.length - 1) === ',') ? item.img_path.substring(0, item.img_path.length - 1) : item.img_path
              item.imgList = item.img_path.split(',')
              item.imgListCount = item.imgList.length
              if (item.imgList[item.imgList.length - 1] === '') {
                item.imgListCount = item.imgList.length - 1
              }
            } else {
              item.img_path = ''
              item.imgListCount = 0
              item.imgList = []
            }
            // 查看图片数据处理（排序）
            let arr = []
            item.imgList.forEach(item2 => {
              if (item2 !== '') arr.push({ url: item2, name: this.autoSubString(item2, '/', '.jpg') })
            })
            item.imgList = this.$common.xeUtils.sortBy(arr, 'name')
            // 组装全部图片数据
            item.imgList.forEach(item3 => {
              this.imgALlList.push(item3)
            })
          })
          this.cloneTableData = this.$common.xeUtils.clone(this.tableData, true)
        } else {
          this.error(data)
          this.tableLoading = false
        }
      })
    },
    autoSubString (str, firstStr, secondStr) {
      if (str === '' || str == null || str === undefined) {
        return ''
      }
      if (str.indexOf(firstStr) < 0) {
        return ''
      }
      let subFirstStr = str.substring(str.indexOf(firstStr) + firstStr.length, str.length)
      let subSecondStr = subFirstStr.substring(0, subFirstStr.indexOf(secondStr))
      if (subSecondStr.indexOf('/') !== -1) {
        let orignStr = subSecondStr.substring(subSecondStr.lastIndexOf('/') + 1, subSecondStr.length)
        let newArr = orignStr.split('-').reverse()
        let newArr2 = []
        newArr.forEach(item => {
          if (parseInt(item) < 10) {
            newArr2.push('0' + item)
          } else {
            newArr2.push(item)
          }
        })
        let newArr3 = newArr2.reverse().join('-')
        return newArr3
      } else {
        return subSecondStr
      }
    },
    searchAction () {
      if (!this.params.idcard) {
        this.$Message.warning('请输入身份证号')
        return false
      }
      this.init()
    },
    showImgListAction (row) {
      console.log(row, '查看图片')
      this.viewShow = true
      this.$refs.viewerShowImg.showLoading()
      this.showImgList = row.imgList
      this.$refs.viewerShowImg.showLoading()
    },
    showImgAllAction (row, index) {
      this.viewShow = false
      this.showImgList = this.imgALlList
      let count = 0
      for (let i = 0; i < this.tableData.length; i++) {
        if (i < index) count += this.tableData[i].imgList.length
      }
      this.$refs.viewerShowImg.show(count)
    },
    printAction (row) {
      this.imgList = row.imgList
      this.$refs.printModal.modalAction(row.dir)
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作失败,\n' + val.errmsg : val
      this.$Message.error(val)
    }
  },
  mounted () {
    // this.init()
  }
}
</script>

<style scoped>
    .input-class {
        width: 250px;
        display: inline-block;
    }

    /deep/ .ivu-poptip-inner {
        width: 900px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        display: inline;
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-right: 10px;
        width: 70px;
    }

    .my_table_insert >>> .row--new {
        background-color: #f1fdf1;
    }

    .container >>> .vxe-table--loading {
        background-color: rgba(249, 246, 246, 0.2);
    }

    .container >>> .vxe-table--loading .vxe-table--spinner {
        width: 40px;
        height: 40px;
    }
</style>
